<template>
  <div class="block-box">
    <div class="block-header-box" :style="{ color: currentType.color }">
      <div class="block-header">{{ currentType?.name }}</div>
      <div class="__other">
        <div class="__unit">单位：{{currentType?.unit}}</div>
        <div class="__icon">
          <span :class="`iconfont ${data.changeRate >=0 ? 'icon-shangsheng' : 'icon-xiajiang'}`"></span>
        </div>
        <div class="__rate">环比上月<span>{{ getRate(data.changeRate) }}</span></div>
      </div>
    </div>
    <div class="chart-row">
      <div class="__chart">
        <div class="chart-chart" ref="chartRef"></div>
        <div class="chart-name bluebg">上月&nbsp;{{data.lastTotal}}</div>
      </div>
      <div class="__chart">
        <div class="chart-chart" ref="chartRef2"></div>
        <div class="chart-name greenbg">本月累计&nbsp;{{data.total}}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, computed, watch, toRefs, Ref, ref } from 'vue';
import { useECharts } from '@/hooks/web/useECharts';
import Big from 'big.js';

const getRate = (value) => {
  if (value || value == 0) { return new Big(value).times(100) + '%' }
  return '';
}
const props = defineProps({
  type: {
    type: String,
    default: 'elec',
  },
  typeName: {
    type: String,
    default: '电%',
  },
  data: {
    type: Object,
    default: () => ({
      lastTotal: 0,
      total: 0,
      changeRate: '-'
    })
  }
});
const { data } = toRefs(props);
const chartRef = ref<HTMLDivElement | null>(null);
const chartRef2 = ref<HTMLDivElement | null>(null);

const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
const chart2 = useECharts(chartRef2 as Ref<HTMLDivElement>);


const setData = (newData) => {
  const chartOptions = {
    grid: {
      left: 10,
      top: 10,
      right: 10,
      // bottom: 10,
    },
    tooltip: {},
  }
  if (newData?.lastMonth) {
    setOptions({
      ...chartOptions,
      series: [
        {
          name: newData?.lastMonth[0].name,
          type: 'pie',
          center: ['50%', '50%'],
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          data: newData?.lastMonth.map((item) => {
            return {
              name: item.classifyName,
              value: item.value
            }
          }),
        },
      ],
    })
  }
  if (newData?.curMonth) {
    chart2.setOptions({
      ...chartOptions,
      series: [
        {
          name: newData?.curMonth[0].name,
          type: 'pie',
          center: ['50%', '50%'],
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          data: newData?.curMonth.map((item) => {
            return {
              name: item.classifyName,
              value: item.value
            }
          }),
        },
      ],
    })
  }
}
watch(() => props.data, (val) => {
  setData(val)
}, { deep: true });
const typeObj = ref({
  elec: {
    icon: 'icon-dianli',
    color: '#008bd5',
    name: '电',
    unit: 'KWH'
  },
  gas: {
    icon: 'icon-qiti',
    color: 'rgb(137,71,105)',
    name: '燃气',
    unit: 'm³'
  },
  water: {
    icon: 'icon-gongshui',
    color: 'rgb(62,179,80)',
    name: '水',
    unit: 'T'
  },
});
const currentType = computed(() => {
  return typeObj.value[props.type];
})
</script>

<style lang="scss" scoped>
.block-box {
  height: 33%;
  padding-bottom: 0.5vh;
  >div {
    flex-shrink: 0;
  }

  .block-header-box {
    display: flex;
    align-items: center;
    margin-right: 1.5vh;
    margin-left: 3px;
    padding: 0 2vh;
    background: rgb(0 0 0 / 15%);
    color: #fff;
  }

  .block-header {
    position: relative;
    flex: 1;
    padding-left: 13px;
    font-size: 1.8vh;
    font-weight: 600;
    line-height: 1.8vh;
    height: 1.8vh;

    &::before {
      content: '';
      position: absolute;
      top: 2px;
      left: 0;
      width: 3px;
      height: 1.4vh;
      border-radius: 3px;
      background: #0067cc;
    }
  }

  .__other {
    font-size: 1.2vh;
    display: flex;
    color: #ffffff;

    .__icon {
      margin: 0 2px 0 5px;
    }

    .iconfont {
      font-size: 1.4vh;
    }

    .icon-shangshen {
      color: #0067cc;
    }

    .icon-xiajiang {
      color: #ce881f;
    }

    .__rate {
      span {
        color: #ce881f;
      }
    }
  }

  .chart-row {
    height: calc(100% - 1.8vh);
    .__chart {
      width: 50%;
      padding: 0 1vh;
      height: 100%;
      float: left;
    }

    .chart-chart {
      height: calc(100% - 1.4vh);
    }

    .chart-name {
      font-size: 1.2vh;
      height: 1.4vh;
      line-height: 1.4vh;
      text-align: center;

      &.bluebg {
        background: rgba(#416991, .15);
        color: #86b4e2;
      }

      &.greenbg {
        background: rgba(62, 179, 80, .15);
        color: rgb(62, 179, 80);
      }
    }
  }
}
</style>
